{% extends 'base.html' %}
{% block content %}
    <div class="data-lists">
        <h3>数据列表</h3>
        <form action="/data-export/" method="post">
            <div class="tools clearfix">
                <div class="sel-condition">

                        <label>重金属类型 : </label>
                        <select id="metal_type" class="mr30" name="metalType">
                            <option value="all">全部</option>
                            <option value="Pb">铅</option>
                            <option value="Hg">汞</option>
                            <option value="Cd">镉</option>
                            <option value="Cr">铬</option>
                            <option value="As">砷</option>
                            <option value="Mn">锰</option>
                            <option value="Zn">锌</option>
                            <option value="Others">其他</option>
                        </select>
                        <input id="search" type="button" value="搜 索">

                </div>
                <div class="child-tools">
                   <a href="/data-manage/">添加</a>
                    <a href="/data-statistics/">统计</a>
{#                    <input type="submit" value="统计">#}
    {#              <a href="data-export/" >  <span><img src="/static/img/print.jpg"></span></a>#}
                </div>
            </div>
            <div id="data_table" class="data-table">
                <table>
                    <thead>
                        <tr>
                            <th><input type="checkbox"  id="all_checked"  value="{{ metal.id}}"></th>
                            <th>事故名称</th>
                            <th>重金属类型</th>
                            <th>行业类型</th>
                            <th>受体类型</th>
                            <th>受损人数</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for metal in contacts %}
                        <tr>
                            <td><input type="checkbox" id="check"  name="list" value="{{ metal.id }}"></td>
                            <td>{{ metal.accident }}</td>
                            <td>{{ metal.metal_kind }}</td>
                            <td>{{ metal.occupation_standard }}</td>
                            <td>{{ metal.viticm_kind_name }}</td>
                            <td>{{ metal.viticm_kind_count }}</td>
                            <td>
                                <a href="/metal_modify/{{ metal.id }}/">修改</a>
                                <a href="/metal_delete/{{ metal.id }}/">删除</a>
                                <a href="/metal_detail/{{ metal.id }}/">详情</a>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="paging clearfix">

                <ul class="clearfix">
                    <li><a href="?page=1">首页</a></li>
                    {% if contacts.has_previous %}
                        <li><a href="?page={{ contacts.previous_page_number }}">&lt;</a></li>
                    {% else %}
                        <li><a disabled>&lt;</a></li>
                    {% endif %}
                    {% for p in paginator.page_range %}
                        {% ifequal p contacts.number %}
                            <li class="active"><a disabled class="p">{{p}}</a></li>
                        {% else%}
                            <li><a href="?page={{ p }}">{{p}}</a></li>
                        {% endifequal %}
                    {% endfor %}
                    {% if contacts.has_next %}
                        <li><a href="?page={{ contacts.next_page_number }}">&gt;</a></li>
                    {% else %}
                        <li><a disabled> &gt;</a></li>
                    {% endif %}
                    <li><a href="?page={{ paginator.num_pages }}">尾页</a></li>
                </ul>
            </div>
        </form>
    <div class="map-spread clearfix">
        <h3>数据分布</h3>
        <div class="mapDiv">
            <div data-dojo-type="dijit.layout.BorderContainer" design="headline" gutters="false" style="position:relative;width:100%; height:700px;">
                <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden; height:700px;">
                    <div id="osmCopy" style="position:absolute; color:black;font-weight:bold;right:10px; bottom:10px; z-Index:999;"></div>
                </div>
            </div>
        </div>
        <div class="representative-color">
            <span><b class="Pb">●</b> 铅 </span>
            <span><b class='Hg'>●</b> 汞 </span>
            <span><b class="Cd">●</b> 镉 </span>
            <span><b class="Cr">●</b> 铬 </span>
            <span><b class="As">●</b> 砷 </span>
            <span><b class="Mn">●</b> 锰 </span>
            <span><b class="Zn">●</b> 锌 </span>
            <span><b class="Other">●</b> 其它 </span>
        </div>

    </div>
</div>
{% endblock %}

{% block js %}
    <script type="text/javascript" src="http://192.168.1.251:8080/arcgis_js_api/library/3.1/jsapi/init.js"></script>
    <script type="text/javascript" src="/static/js/django-ajax.js"></script>
    <script type="text/javascript" src="/static/js/mapAction_index.js"></script>
{% endblock %}
